<template>
	<view class="">
		<common-title :title="titleContent" @clickLeft="backToUpPage"></common-title>
		<view class="bind-message" v-for="(item,index) in fromUsersInfo" :key="index">
			<view class="bind-message-item" v-if="toUserInfo && fromUsersInfo">
				<view class="bind-message-top">
					<view class="bind-message-left">
						<image :src="item.avatar"/>
						<view>{{item.userName}}</view>
					</view>
					<view class="bind-message-middle">
						<image :src="bannerImages[currentIndex]" />
					</view>
					<view class="bind-message-right">
						<image :src="toUserInfo.avatar"/>
						<view>我</view>
					</view>
				</view>
				<view class="bind-message-bottom" v-if="currentUserAccount === toUserAccount">
					<button class="bottom-refuse" @click="coupleBind(item.account, toUserAccount, '3', index)">拒绝</button>
					<button class="bottom-receive" @click="coupleBind(item.account, toUserAccount, '2', index)">接受</button>
				</view>
				<view class="bind-message-bottom" v-else>
					<view>等待对方确认中</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted, onBeforeUnmount } from "vue";
	import { onShow } from '@dcloudio/uni-app';
	import { getDataFromStorage, setDataToStorage } from "../../../../utils/commonUtils";
	import { getUserInfoByAccount, bindCoupleOption } from "../../../../utils/apiMine";
	
	//===============================用户是否登录了=====================
	//================================common-title=========================================
	//标题内容
	const titleContent = ref({
		left:'',
		midst:'情侣绑定消息'
	});
	
	//返回
	const backToUpPage = () => {
		uni.switchTab({
			url:'/pages/mine/mine'
		})
	};
	//-----------------图片轮播---------------------------------
	const bannerImages = ref([
		'/static/images/mine/coupleBind00.png',
		'/static/images/mine/coupleBind01.png',
		'/static/images/mine/coupleBind02.png',
		'/static/images/mine/coupleBind03.png'
	]);
	const currentIndex = ref(0); // 当前显示的图片索引
	let intervalId = null; // 定时器ID
	// 切换到下一张图片
	const nextImage = () => {
		currentIndex.value = (currentIndex.value + 1) % bannerImages.value.length; // 轮询逻辑
	};
	
	//-----------------onMounted---------------------------------
	const message = ref([]);
	//请求用户的账号
	const fromUsersAccount = ref([]);
	//接收用户的账号
	const toUserAccount = ref();
	//请求用户的信息
	const fromUsersInfo = ref([]);
	//接收用户的信息
	const toUserInfo = ref(null);
	//当前用户信息
	const currentUserAccount = ref()
	
	onMounted(async () => {
		intervalId = setInterval(nextImage, 1000); // 每1000ms切换下一张
		let res = await getDataFromStorage('bindCoupleMessage');
		let res2 = await getDataFromStorage('userAccount');
		currentUserAccount.value = res2;
		message.value = res;
		// console.log(message.value);
		// 使用 map 提取所有的 from 字段并赋值给 fromUsers
		fromUsersAccount.value = message.value.map(item => item.from);
		toUserAccount.value = message.value[0].to;
		// console.log(fromUsersAccount.value); // 打印结果以检查
		// console.log(toUserAccount.value); // 打印结果以检查
		await getUserInfoByAccount(toUserAccount.value).then((res) => {
			// console.log(res);
			toUserInfo.value = res;
		});
		// 使用 for...of 循环遍历 fromUsersAccount
		for (const account of fromUsersAccount.value) {
			getUserInfoByAccount(account).then((res) => {
				fromUsersInfo.value.push(res);
			})
		}
		// console.log(toUserInfo.value);
		// console.log(fromUsersInfo.value);
	});
	
	// 组件卸载时，清除定时器
	onBeforeUnmount(() => {
		clearInterval(intervalId);
	});
	//-----------------接受和拒绝情侣绑定---------------------------------
	const showTimeType = ref({
		'type':'1',
		'time':'2000-01-01'
	})
	const coupleBind = async (fromUser, toUser, status, index) => {
		// console.log(index);
		await bindCoupleOption({
			'fromUser': fromUser,
			'toUser': toUser,
			'status': status
		}).then((res) => {
			fromUsersInfo.value.splice(index, 1); // 删除指定索引的消息
			message.value.splice(index, 1);
			// console.log(fromUsersInfo.value);
			setDataToStorage('bindCoupleMessage', message);
		}).finally(() => {
			setDataToStorage('showTimeType', showTimeType)
		})
		
		
	}
</script>

<style lang="scss" scoped>
	.bind-message{

		.bind-message-item{

			align-items: center;
			justify-content: space-evenly;
			width: 700rpx;
			height: 300rpx;
			margin: 20rpx;
			border-radius: 20rpx;
			background-color: #e4e4e4;
			.bind-message-top{
				display: flex;
				align-items: center;
				justify-content: space-around;
				.bind-message-left, .bind-message-middle, .bind-message-right{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 200rpx;
					height: 200rpx;
					// background-color: bisque;
					image{
						width: 50px;
						height: 50px;
						border-radius: 50%;
						margin-bottom: 10px;
					}
				}
				.bind-message-middle{
					
				}
				.bind-message-right{
					
				}
			}
			.bind-message-bottom{
				display: flex;
				align-items: center;
				justify-content: space-around;
				.bottom-refuse{
					background-color: #87CEEB;
				}
				.bottom-receive{
					background-color: #FFCCFF;
				}
			}
		}
	}
</style>